<div class="ui-grid-row">
    <div class="button-item">
        <button pButton type="text" class="ui-button-danger" icon="fa fa-pencil-square-o" label="清空面板" (click)="clear()"></button>
        <button pButton type="text" class="ui-button-warning" icon="fa fa-search" label="移除组件" (click)="remove()"></button>
        <button pButton type="text" class="ui-button-info" icon="fa fa-plus" label="存盘" (click)="save()"></button>
    </div>
</div>
<div class="ui-g ui-grid-row ui-widget-content fb-drawer-container" style="height:100%;width:100%;overflow-x:auto;margin-top:-5px;">
    <!--组件面板-->
    <div class="fb-available-assembly-container" style="width:80px;padding: 0;">
        <p-scrollPanel [style]="{width: '100%', height: '100%','border':'none','overflow-x':'hidden'}">
            <ul style="margin:0;padding:0;">
                <li *ngFor="let assembly of availableAssembly" [ngClass]="assembly.iconCss" class="ui-state-default ui-helper-clearfix" pDraggable="assembly"
                    [title]="assembly.name" (onDragStart)="dragStart($event,assembly)" (onDragEnd)="dragEnd($event)">
                </li>
            </ul>
        </p-scrollPanel>
        
    </div>
    <!--表单面板-->
    <div class="fb-dynamic-form-container" id="formContentArea" pDroppable="assembly" (onDrop)="drop($event)" style="width:calc(72% - 5px);height:calc(100% - 40px);">
        <!--对齐基准线-->
        <div id="mm"></div>
        <div id="nn"></div>
        <fb-dynamic-form [assemblies]="assemblies" [mode]="1" (onAssemblyClickEmitter)="onAssemblyClick($event)"></fb-dynamic-form>
    </div>
    <!--组件属性面板-->
    <div class="fb-dynamic-attributes-container"  style="width:calc(28% - 110px);">
        <fb-dynamic-attributes [assembly]="assembly" [names]="names"></fb-dynamic-attributes>
    </div>
</div>
